<template>
  <view class="index-box">
    <!-- #ifdef MP -->
    <!-- 小程序中的搜索框编译 -->
    <search-input @toSearch="toSearch"></search-input>
    <!-- #endif -->

    <!-- 轮播图 -->
    <my-banner :bannerList="bannerList"></my-banner>

 <mescroll-body ref="mescorllRef" 
  @init="mescrollInit" @down="downCallback" @up="upCallback"
  :down="downOption" :up="upOption"
  >
      <!-- 分类区域 -->
      <category-box :categoryList="categoryList"></category-box>
      
      <view class="list-container">
        <!-- 热门推荐区域 -->
        <swiper-course name="热门推荐" word="HOT" :courseData="hotCourseList"></swiper-course>
        <!-- 免费精选区域 -->
        <swiper-course name="免费精选" word="FREE" :courseData="freeCourseList"></swiper-course>
        <!-- 近期上新区域 -->
        <new-course name="近期上新" word="NEW" :courseData="newCourseList"></new-course>
        <!-- 收费精品课程区域 -->
        <charge-course name="收费精品" word="NICE" :courseData="chargeCourseList"></charge-course>
      </view>
  </mescroll-body>

    
  </view>
</template>

<script setup lang="ts">
  import {
    getCurrentInstance,
    ref,
    onBeforeMount,
    reactive,
    toRefs,
    onMounted
  } from "vue";
  import {
    onNavigationBarButtonTap,
    onPullDownRefresh,
    onReachBottom,
    onNavigationBarSearchInputClicked,
    onLoad
  } from '@dcloudio/uni-app';
  import searchInput from '@/components/common/search-input.vue'
  import myBanner from '@/components/common/my-banner.vue'
  import categoryBox from './components/category-box.vue'
  import swiperCourse from './components/swiper-course.vue'
  import newCourse from './components/new-course.vue'
  import chargeCourse from "./components/charge-course.vue"
  import api from "@/api/course.js"
  
  
  // 获取当前组件实例
  const {
    proxy
  } = getCurrentInstance()
  const bannerList = ref([])
  const categoryList = ref([])
  const hotCourseList = ref([])
  const freeCourseList = ref([])
  const newCourseList = ref([])
  const chargeCourseList = ref([])
  // 动态渲染input的placeholder内容
  let placeholderData = () => {
    // #ifdef APP-PLUS
    // 获取当前页面的实例
    const currentWebview = proxy.$scope.$getAppWebview();
    let arr = ['APP · 微信小程序', 'Java · SprinBoot', 'SpringCloud · SpringSecurity ', ' Vue· React '];
    let i = 0;
    const len = arr.length;
    setInterval(() => {
      i = i < len ? ++i : 0;
      currentWebview.setStyle({
        'titleNView': {
          "searchInput": {
            "placeholder": arr[i]
          }
        }
      })
    }, 3000)
    // #endif
  }


  onLoad(() => {
    // #ifdef APP-PLUS
    // 调用渲染 input的placeholder 方法
    placeholderData()
    // #endif
  })

  // 获取轮播图方法
  const getBannerList = async () => {
    const res = await api.getAdvertList()
    bannerList.value = res.data
  }
  // 获取分类方法
  const getCategoryList = async () => {
    const res = await api.getCategoryList()
    categoryList.value = await res.data
  }
  // 获取热门课程
  const getHotCourseList = async () => {
    const res = await api.getList({
      sort: 'hot'
    }, 1, 8)
    hotCourseList.value =  res.data.records
  }
  // 获取免费课程
  const getFreeCourseList = async () => {
    const res = await api.getList({
      isFree: 1
    })
    freeCourseList.value = await res.data.records
  }
  // 获取近期新增课程
  const getNewCourseList = async () => {
    const res = await api.getList({
      sort: 'new'
    })
    newCourseList.value = await res.data.records
  }
  // 获取收费课程
  const getChargeCourseList = async () => {
    const res = await api.getList({
      isFree: 0
    })
    chargeCourseList.value =  res.data.records
  }
  
  const downOption = reactive({//下拉刷新参数
			offset:60
		})
  const upOption = reactive({//上拉加载参数
  		page:{
        num:0,	//默认第零页，每次调用upCallback，num+1
        size:10
      }
  	})
  
  const upCallback =  async (page)=>{
    let pageNum = page.num;
    let pageSize = page.size;
    if(pageNum === 1){
      // 调用获取轮播图数据
      getBannerList()
      // 调用获分类数据
      getCategoryList()
      // 调用获取课程
      getHotCourseList()
      getFreeCourseList()
      getNewCourseList()
    }
    if(pageNum === 1) chargeCourseList.value = []
    const res = await api.getList({
      isFree: 0
    },pageNum,pageSize)
    chargeCourseList.value = [...chargeCourseList.value,...res.data.records]
    proxy.mescroll.endBySize(res.data.records.length,res.data.total)
  }
  
  // 监听原生标题栏按钮点击时间
  onNavigationBarButtonTap(e => {
    if (e.index === 0) {
      uni.scanCode({
        success: (res) => {
          uni.navigateTo({
            url: `/pages/public/web-view?url=${res.result}`
          })
        },
        fail: () => {

        }
      })
    }
  })

// 监听原生搜索框点击事件
onNavigationBarSearchInputClicked(()=>{
  proxy.navTo('/pages/search/search')
})

const toSearch = ()=>{
  proxy.navTo('/pages/search/search')
}
</script>

<style lang="scss" scoped>
  .list-container {
    padding: 0 30rpx;
  }
</style>
